<template>
	<div class="menu-container">
		<RouterLink
			:exact="item.exact"
			v-for="(item, index) in shuju"
			:key="index"
			:to="{ name: item.name }"
			active-class="selected"
			exact-active-class=""
		>
			<div class="icon"><Icon :type="item.type" /></div>
			<span> {{ item.content }}</span>
		</RouterLink>
	</div>
</template>

<script>
import Icon from "@/components/Icon";
export default {
	data() {
		return {
			shuju: [
				{ type: "home", content: "首页", name: "Home", exact: true }, //是否精确匹配
				{ type: "blog", content: "文章", name: "Blog", exact: false },
				{ type: "about", content: "关于我", name: "About", exact: true },
				{ type: "code", content: "项目&效果", name: "Project", exact: true },
				{ type: "chat", content: "留言板", name: "Message", exact: true },
			],
		};
	},
	components: {
		Icon,
	},
};
</script>

<style scoped lang="less">
@import "~@/styles/var.less";
@itemheight: 45px;
.menu-container {
	margin: 24px 0;
	color: @gray;
	a {
		display: flex;
		height: @itemheight;
		padding: 0 50px;
		align-items: center;
		cursor: pointer;
		.icon {
			width: 24px;
			.icon-container {
				vertical-align: middle;
			}
		}
		&:hover {
			color: #fff;
		}
		&.selected {
			background: #2d2d2d;
		}
	}
}
</style>
